<template>
  <div class="userphone">
    <div class="cart" >   
                <i class="el-icon-bangzhu"></i>
                <span>员工通讯录</span>
            </div>
      <div class="nasearchh">
        <el-input v-model="formInline.filter_parameter" @keyup.enter.native="namsss" @blur="nameSreach(formInline.filter_parameter)" size="small" prefix-icon="el-icon-search" placeholder="请输入名字查询"></el-input>
        <el-button type="primary" icon="el-icon-search" size="small"  @click="nasearch">查询</el-button>
      </div>
      <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="按区域筛选">
            <el-select size="small"  @change="areaselected(formInline.area_name)" v-model="formInline.area_name" placeholder="按区域筛选">
            <el-option 
            v-for="(item,index) in areacho"
            :key="item+index"
            :value="item.area"
            >{{item.area}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="按项目筛选">
            <el-select size="small"  @change="departmentselected(formInline.project_name)" v-model="formInline.project_name" placeholder="按项目筛选">
            <el-option 
            v-for="(item,index) in selection"
            :key="item+index"
            :value="item"
            >{{item}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" @click="choose">筛选</el-button>
            <el-button type="primary" size="small" @click="allsss">全部</el-button>
            <el-button type="warning" icon="el-icon-folder-opened" size="small" @click="exportExcel">导出当前页</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%" >
      <el-table-column fixed prop="id" label="序号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>
      <el-table-column prop="area" label="区域" header-align="center" align="center"></el-table-column>
      <el-table-column prop="project" label="项目" header-align="center" align="center"></el-table-column>
      <el-table-column prop="department" label="部门" header-align="center" align="center"></el-table-column>
      <el-table-column prop="position" label="职位" header-align="center" align="center"></el-table-column>
      <el-table-column prop="mobile" label="联系方式" header-align="center" align="center"></el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      layout=" prev, pager, next,jumper"
      :total="totalCount">
    </el-pagination>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: '',
          name: "",
          area: "",
          project: "",
          department: "",
          position: "",
          mobile: ""
        }
      ],
      areacho:[],
       formInline: {
          area_name: '',
          project_name: '',
          filter_parameter: "",
      },
      pagesize:10,
      currentPage:1,
      totalCount:1,
    }
  },
  methods: {
    handleCurrentChange(val){
      this.currentPage = val
      let page_size = this.pagesize
      let page = this.currentPage
      let url = `/usermanage/phone/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url,this.formInline).then(res => {
        this.tableData = res.results;
        this.totalCount = res.count
      });
    },
    areaselected(val){
      this.formInline.area_name = val
      this.formInline.project_name = ''
    },
    departmentselected(val){
      this.formInline.project_name = val
    },
    allsss(){
      this.formInline.area_name = ''
      this.formInline.project_name = ''
      this.formInline.filter_parameter = ''
      this.getData()
    },
    choose(){
      let page_size = this.pagesize
      this.currentPage = 1
      let page = this.currentPage
      let url = `/usermanage/phone/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url,this.formInline).then(res => {
        this.tableData = res.results;
        this.totalCount = res.count
      });
    },
    areachoose(){
      let url='/usermanage/area/'
      this.$axios.get(url).then(res=>{
        this.areacho = res.data
      })
    },
     getData(){
      let page_size = this.pagesize
      let page = this.currentPage
      let url = `/usermanage/phone/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url).then(res => {
        this.tableData = res.results;
        this.totalCount = res.count
      });
    },
    namsss(){
      this.nasearch()
    },
    nameSreach(val){
      this.formInline.filter_parameter = val
    },
    nasearch(){
      if(this.formInline.filter_parameter==''){
        this.getData()
      }
      else{
        let page_size = this.pagesize
        this.currentPage = 1
        let page = this.currentPage
        let url = `/usermanage/phone/?page=${page}&page_size=${page_size}`;
        this.$axios.get(url,this.formInline).then(res => {
          this.tableData = res.results;
          this.totalCount = res.count
        });
      }
    },
     exportExcel() {　//兼容ie10哦！
      　　require.ensure([], () => {　　　　　　　　
          const { export_json_to_excel } = require('../../../vendor/Export2Excel');　　//引入文件　　　　　　
          const tHeader = ['序号', '姓名', '区域', '项目', '部门', '职位','联系电话']
          const filterVal = ['id', 'name','area','project','department','position','mobile'];//table表格中对应的属性名　　　　　 　　　
          const list = this.tableData;　　//想要导出的数据　　　　　　
          const data = this.formatJson(filterVal, list);　　　　　　　　
          export_json_to_excel(tHeader, data, '员工通讯录');
          })
      },
      formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]));
      },
  },
  mounted(){
    this.areachoose()
    this.getData()
  },
  computed : {
        selection :function(){
            for(var i = 0; i < this.areacho.length; i++){
                if(this.areacho[i].area == this.formInline.area_name){
                    return this.areacho[i].project;
                }
            }
        },
   }
}

</script>

<style lang="less">
.userphone {
  .cart{
            width: 20%;
            margin-bottom: 30px;
            i{
                font-size: 20px;
                margin-right: 8px;
                color: gray;
            }
            span{
                font-size: 15px;
                color: gray;
                font-weight: bold;
            }
        }
  .el-input--mini .el-input__inner {
    width: 40%;
    margin-bottom: 22px;
  }
  .el-input--mini{
    display: inline;
    margin-right: 80px;
  }
  .el-pagination{
    display: flex;
    justify-content: center;
  }
  .el-button--small, .el-button--small.is-round{
    margin-right: 30px;
  }
  .nasearchh{
    .el-input--small{
      width: 18%;
      margin: 10px 20px 20px 5px;
    }
  }
}
</style>